<!doctype html>
<html>
 <head>
  <title>Examples for the article "Improve your forms using HTML5!"</title>
  <style>
   #validation label input:valid { background:lime }
   #validation label input:invalid { background:red; color:white }
   input[type=submit]:default { border:solid }
   textarea { height:4em; width:12em }
  </style>
  
  <!-- This CSS file is not necessary to use html5Widgets -->
		<link type="text/css" rel="stylesheet" href="../../../shared/css/useragentmanExample.css">
          <!-- Needed for Validation --> 
		  <script type="text/javascript" src="../../../shared/js/EventHelpers.js">
		</script>
		<script type="text/javascript" src="../../../shared/js/weston.ruter.net/webforms2/webforms2_src.js">
		</script>
 </head>
 <body>
 	<div id="exampleBlurb">
    		<p>The following is an example form taken the
			article <a href="http://dev.opera.com/articles/view/improve-your-forms-using-html5/">Improve your forms using HTML5!</a>
			from <a href="http://dev.opera.com">The Opera Developer Community Website</a>. 
			
			The only thing different from the original is that I have added
			Weston Ruter's <code>webforms2</code> to implement HTML5 form validation
			in browsers that don't natively support it.  This change required only
			one <code>script</code> tag.
			  
			<a href="#">Back to the User Agent Man HTML5 Forms article</a>.</p>
    	</div>
	
	
 	<div id="thirdPartyExample">
	  <h1>Examples for the article "Improve your forms using HTML5!"</h1>
	  <p>These examples form part of the article
	   <a href="http://dev.opera.com/articles/view/improve-your-forms-using-html5/">Improve
	   your forms using HTML5!</a> Have fun! (To play with the examples you need to
	   use <a href="http://www.opera.com/download/">Opera 9 or newer</a>.</p>
	  <p>The "search" control below should be focused:</p>
	  <form>
	   <p><label>Search: <input autofocus name=search></label></p>
	   <p><input type=submit value=Go!></p>
	  </form>
	  <p>The control below can be used to test "validation" of form controls:</p>
	  <form id="validation">
	   <p><label>Name: <input required name=name></label></p>
	   <p><label>E-mail: <input type=email required name=email></label></p>
	   <p><label>URL: <input type=url name=url></label></p>
	   <p><label>Comment: <textarea required name=comment></textarea></label></p>
	   <p><input type=submit value=React!></p>
	  </form>
  </div>
 </body>
</html>